<template>
  <!-- 充电桩占用率 -->
  <div class="chart-box2">
    <div class="chart-title">充电桩占用率</div>
    <div class="chart-content">
      <div style="height: 60%">
        <WaterLevelPond
          style="width: 30%; height: 100%; margin-left: 35%"
          :config="config"
          :key="chartKey"
        />
      </div>
      <div style="height: 30%; margin-top: 10%" class="legend">
        <a-row class="h-100p" align="middle" :gutter="8">
          <a-col :span="12" class="text-number-1">
            <div>充电桩数量</div>
            <div class="number" :style="{ color: lightGreen }">
              <count-to
                :start-val="countData.total.oldVal"
                :end-val="countData.total.newVal"
                :duration="3000"
              />
            </div>
          </a-col>
          <a-col :span="12" class="text-number-1">
            <div>剩余充电桩数量</div>
            <div class="number" :style="{ color: lightGreen }">
              <count-to
                :start-val="countData.enable.oldVal"
                :end-val="countData.enable.newVal"
                :duration="3000"
              />
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import common from "../../utils/common";
import CountTo from "../countTo/index.vue";
import { WaterLevelPond } from "@kjgl77/datav-vue3";
import store from "../../../../store";

export default defineComponent({
  name: "ChargingStationOccupancy",
  components: { CountTo, WaterLevelPond },
  setup() {
    let keyCount = 1;
    let keyPrefix = "parking_lot_occupancy_";
    const state = reactive({
      ...common.theme,
      config: {
        data: [0],
        waveHeight: 10,
        colors: ["rgba(56,176,92, 1)", "rgba(56,176,92, 0.5)"],
      },
      countData: {
        total: { ...common.countToInit },
        enable: { ...common.countToInit },
      },
    });

    const setChartUpdate = () => {
      keyCount++;
      state.chartKey = `${keyPrefix}_${keyCount}`;
    };

    watch(
      () => store.getters.resizeTrigger,
      () => {
        setChartUpdate();
      }
    );

    watch(
      () => store.getters.centerControl.Park_chargingPileSituation,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Park_chargingPileSituation } = store.getters.centerControl;
      if (Park_chargingPileSituation) {
        state.config.data = [Number(Park_chargingPileSituation.in_use_scale)];
        state.countData = {
          total: {
            oldVal: state.countData.total.newVal,
            newVal: Park_chargingPileSituation.total_count,
          },
          enable: {
            oldVal: state.countData.enable.newVal,
            newVal: Park_chargingPileSituation.enable_count,
          },
        };
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.chart-content {
  display: flex;
  flex-direction: column;
  .text-number-1 {
    text-align: center;
    .number {
      margin-top: 0rem;
      font-size: 2.8rem;
    }
  }
}
</style>
